<script setup lang="ts">
import router from "@/router";
import { ref, reactive, onMounted } from "vue";
import { getTeacher } from "@/api/student/he/frontMain";

const teacher: any = reactive([]);

onMounted(() => {
  getTeacher().then((res: any) => {
    teacher.length = 0;
    if ((res.data.msg = "请求成功")) {
      // console.log(res);

      teacher.push(res.data.data);
      // console.log(teacher);
    }
  });
});

const goTeacher = (id: any) => {
  router.push({ path: "/TeachersDetail", query: { id: id } });
};
const peoNum = ref(23);
</script>
<template>
  <div class="block text-center">
    <el-carousel trigger="click" height="80px" :autoplay="false">
      <el-carousel-item
        style="background-color: white"
        v-for="item in 4"
        :key="item"
        class="teachers"
        height="80px"
      >
        <template v-for="item in teacher[0]">
          <div class="oneTeahcher" @click="goTeacher(item.id)">
            <!-- <div class="touxiang"> -->
            <div class="touxiang">
              <el-avatar :src="item.image" />
            </div>
            <!-- </div> -->
            <ul id="teacherintr">
              <li>{{ item.name }}</li>
              <li>{{ item.introduce }}</li>
            </ul>
          </div>
        </template>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<style scope>
/* 轮播 */
.demonstration {
  color: var(--el-text-color-secondary);
}
.el-carousel__item {
  height: 100px;
}
.el-carousel__item h3 {
  /* color: #475669; */
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}
.el-carousel {
  /* border: 1px solid black; */
  /* background-color: white; */
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 内容 */
.teachers {
  display: flex;
  padding: 5px 10px;
}
.oneTeahcher {
  display: flex;
  float: left;
  width: 20%;
  border-right: 1px solid #d3dce6;
  margin: 15px;
}
.oneTeahcher:last-child {
  border-right: 0;
}
ul {
  /* display: flex; */
  margin: 0;
  padding: 0;
}
.oneTeahcher li {
  font-size: 12px;
}
/* 头像 */
.touxiang {
  margin-right: 20px;
}
.el-carousel__indicators {
  display: none;
}
#teacherintr li {
  color: black !important;
}
</style>
